<template>
  <page-lr>
      <el-form :inline="true" size="small" :model="searchForm" label-width="90px" slot="content-right">
        <el-form-item label="发布日期：">
          <el-date-picker v-model="searchForm.publish_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerPublish" @change="changePublish"></el-date-picker>
        </el-form-item>
        <el-form-item label="预测日期：">
          <el-date-picker v-model="searchForm.prediction_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerPrediction" @change="getList"></el-date-picker>
        </el-form-item>
      </el-form>
    <div class="list" v-loading="loading" slot="content-left">
      <h3 class="align-center">{{$moment(searchForm.prediction_date).format('Y[年]MM[月]DD[日]')}}广东省城市AQI预测对比</h3>
      <v-chart :options="option" autoresize style="height:400px;width:100%;"></v-chart>
      <h3 class="align-center p-t-30">{{$moment(searchForm.prediction_date).format('Y[年]MM[月]DD[日]')}}广东省AQI超标城市</h3>
      <el-table
          v-loading="loading"
          :data="list.year"
          border
          stripe
          size="mediun"
          style="width: 100%">
          <el-table-column label="日期" prop="forecast_date" align="center" />
          <el-table-column label="城市" prop="name" align="center" />
          <el-table-column label="AQI范围" prop="aqi_value" align="center" />
          <el-table-column label="首要污染物" prop="primary_pollutant" align="center" />
        </el-table>
    </div>
  </page-lr>
</template>
<script>
export default {
  data() {
    return {
      loading: true,
      searchForm: {
        prediction_date: '',
        publish_date: ''
      },
      dataRange: [],
      pickerPublish:{
        disabledDate:(time) => {
          let res = this.dateRange.indexOf(this.$moment(time).format('YYYY-MM-DD'));
          return res == -1;
        }
      },
      pickerPrediction:{
        disabledDate:(time) => {
          const current = new Date(this.searchForm.publish_date).getTime();
          const next = new Date(this.$moment(this.searchForm.publish_date).add(7,'d')).getTime();
          return time.getTime() < current || time.getTime() > next;
        }
      },
      option:{},
      list: {
        province: [],
        year: []
      },
      colors : {
        优: 'rgb(0, 228, 0)',
        良: 'rgb(255, 255, 0)',
        轻度污染: 'rgb(255, 126, 0)',
        中度污染: 'rgb(255, 0, 0)',
        重度污染: 'rgb(153, 0, 76)',
        严重污染: 'rgb(126, 0, 35)'
      },
    }
  },
  created() {
    this.getPublishDate();
  },
  methods: {
    getPublishDate(){
      this.$request('get', '/chaqi/get_publish_dates', {}, (data,msg) => {
        this.dateRange = data;
        this.searchForm.publish_date = data[0];
        this.searchForm.prediction_date = this.$moment(data[0]).add(1,'d').format('YYYY-MM-DD');
        this.getList();
      })
    },
    changePublish(val){
      this.searchForm.prediction_date = this.$moment(val).add(1,'d').format('YYYY-MM-DD');
      this.getList();
    },
    async getList(){
      let arr = this.searchForm.prediction_date.split('-');
      let params = {
        year: Number(arr[0]),
        month: Number(arr[1]),
        day: Number(arr[2]),
        publish_date: this.searchForm.publish_date
      };      
      this.loading = true;
      this.list.province = await this.$request('get', '/chaqi/forecast/province', params);
      this.list.year = await this.$request('get', '/chaqi/forecast/top', params);
      this.initOptions();
      this.loading = false;
    },
    initOptions(){
    this.option = {
      tooltip: {
        trigger: 'axis',
        formatter: (params) => {
          return params[0].name + '<br>' + params[0].marker + 'AQI：' + params[0].data;
        }
      },
      grid: {
        top: 30,
        left: 40,
        right: 20,
        bottom: 50,
      },
      xAxis: {
        type: 'category',
        data: this.list.province.map(i => i.name),
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          rotate: 45,
          fontFamily: 'AlibabaPuHuiTi-Regular',
          color: '#000',
          fontSize: 15,
        }
      },
      yAxis: {
        type: 'value',
        minInterval: 1,
        splitNumber: 4,
        axisLabel: {
          fontFamily: 'AlibabaPuHuiTi-Regular',
          color: '#000',
          fontSize: 15,
        }
      },
      series: [
        {
          data: this.list.province.map(i => i.aqi),
          type: 'bar',
          barMaxWidth: 30,
          label: {
            normal: {
              show: true,
              lineHeight: 22,
              formatter: '{c}',
              position: 'top',
              textStyle: {
                fontFamily: 'AlibabaPuHuiTi-Bold',
                color: '#000',
                fontSize: 14,
              }
            }
          },
          itemStyle: {
            color: (params) => {
              let str = '';
              switch (true) {
                case params.data <= 50:
                  str = this.colors.优;
                  break;
                case params.data <= 100:
                  str = this.colors.良;
                  break;
                case params.data <= 150:
                  str = this.colors.轻度污染;
                  break;
                case params.data <= 200:
                  str = this.colors.中度污染;
                  break;
                case params.data <= 300:
                    str = this.colors.重度污染;
                    break;
                default:
                  str = this.colors.严重污染;
                  break;
              }
              return str;
            }
          }
        }
      ]
    };
  }
  }
}
</script>